<!DOCTYPE html>
<html class="reftest-wait">
<title>View transitions: prerender navigation</title>
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
<link rel="author" href="mailto:vmpstr@chromium.org">
<!-- TODO(crbug.com/1418681). This test should work automatically,
     but doesn't due to the referenced bug.
<link rel="match" href="transition-to-prerender-ref.html">
-->
<script src="/common/utils.js"></script>
<script src="/speculation-rules/prerender/resources/utils.js"></script>
<script src="/common/reftest-wait.js"></script>
<style>
@view-transition { navigation: auto; }
html { background: red; }
#target {
  width: 200px;
  height: 200px;
  background: black;
  color: white;
  position: absolute;
  top: 40px;
  view-transition-name: target;
}
</style>
<div id="target"></div>
<script>
const uid = token();

function startTest() {
  const old_url = "/transition-to-prerender-manual.html";
  const new_url = `/resources/transition-to-prerender.html?uid=${uid}`;
  window.location.href = window.location.href.replace(old_url, new_url);
}

async function waitForPrerender() {
  const channel = new PrerenderChannel('prerender-channel', uid);

  const gotMessage = new Promise(resolve => {
      channel.addEventListener('message', resolve)
    }, {
      once: true
  });

  startPrerendering(`resources/transition-to-prerender.html?uid=${uid}`);
  await gotMessage;
  startTest();
}

onload = waitForPrerender;
</script>
</html>
